<template>
  <div ref="mainCon" class="container">
    <topTitle
      :titleText="titleText"
      :titleExplain="titleExplain"
      back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="question">
        {{ detailInfo.description }}
        <span
          :class="
            detailInfo.status == 'UNREPLY'
              ? 'startStatus noStart'
              : 'startStatus answered'
          "
        >
          {{ detailInfo.status == 'UNREPLY' ? '待回复' : '已回复' }}
        </span>
        <div class="explain">
          <span
            >{{
              detailInfo.userType == 'PERSONAGE' ? '个人用户' : '企业用户'
            }}
            | {{ detailInfo.qaName }}</span
          >
          <span>{{ detailInfo.createTime }}</span>
        </div>
      </div>
      <div class="title">回复信息</div>
      <div class="toAnswer" v-if="detailInfo.status == 'UNREPLY'">
        <el-input
          type="textarea"
          autosize
          placeholder="请填写回复内容，不超过500个字"
          class="input"
          maxlength="500"
          show-word-limit
          v-model="reply"
        >
        </el-input>
        <el-button
          style="margin-left: 16px"
          class="commonBut saveBtn"
          v-sdc
          @click="toSave"
        >
          <span class="opetareText">回复</span>
        </el-button>
      </div>
      <div class="detail" v-if="detailInfo.status == 'REPLYED'">
        <img src="../../../static/img/answerQuestion/ldjc.png" alt="" />
        <div class="detailInfo">
          <div class="userName">
            {{ detailInfo.replyName }}（{{ detailInfo.replyAccount }}）
            <span>{{ detailInfo.replyTime }}</span>
          </div>
          <div class="answerInfo">
            {{ detailInfo.reply }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'answerQuestionDetail',
  data() {
    return {
      titleText: '问题答疑',
      titleExplain: '个人/企业用户通过公众号提交的问题，可通过此功能查询及回复',
      detailInfo: '',
      reply: '', //回复内容
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-a/question/questionDetails',
        data: { id: this.$route.query.id },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.detailInfo = res.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {})
    },
    toSave() {
      if (!this.reply) {
        this.$message.warning('请输入回复内容')
        return
      }
      this.axios({
        method: 'post',
        url: 'api-a/question/replyQuestion',
        data: { id: this.$route.query.id, reply: this.reply },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message.success('回复成功')
            this.getDetail()
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {})
    },
    goBack() {
      this.$router.push({
        path: '/home/answerQuestion/answerQuestionList',
        name: 'answerQuestionList',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/answerQuestion/answerQuestionList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 24px;
}
.title {
  font-size: 16px;
  color: #333;
  font-weight: 700;
  padding-left: 16px;
}
// 问题
.question {
  padding-left: 16px;
  line-height: 1;
  background: #f8f9fb;
  padding: 20px 16px;
  font-size: 20px;
  color: #333;
  font-weight: 700;
  margin-bottom: 32px;
  .explain {
    margin-top: 16px;
    font-size: 14px;
    color: #999;
    font-weight: 400;
    span {
      margin-right: 24px;
    }
  }
}
// 回复
.input {
  padding-left: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
  /deep/.el-textarea__inner {
    height: 180px !important;
    min-height: 180px !important;
  }
}
// 已回复详情
.detail {
  padding-left: 16px;
  img {
    vertical-align: top;
  }
  margin-top: 20px;
  .detailInfo {
    display: inline-block;
    width: calc(100% - 68px);
    padding-left: 20px;
    .userName {
      color: #333;
      font-weight: 700;
      margin: 2px 0 6px 0;
      font-size: 14px;
      span {
        color: #999;
        font-weight: 400;
        margin-left: 20px;
      }
    }
    .answerInfo {
      color: #333;
      line-height: 21px;
      font-size: 14px;
    }
  }
}
</style>
